<template>
  <div id="box">
    <!--    <el-button size="mini" type="primary" class="btn" @click="backMap">返回概览</el-button>-->
    <div class="btn" @click="backMap">返回概览</div>
    <div id="chinaChart" :style="{height:height,width:width} " />
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
require('echarts/theme/macarons')
require('echarts/map/js/china')
require('echarts/lib/chart/map')
require('echarts/map/js/province/tianjin')
require('echarts/map/js/province/hebei')
export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      backVisible: false,
      currentView: '',
      chart: null,
      flag: false,
      map: 'china',
      dataList: [
        { name: '南海诸岛', value: 0 },
        { name: '河北', value: 2 },
        { name: '天津', value: 7 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
        { name: '北京', value: 0 }
      ],
      tianjinDataList: [
        { name: '和平区', value: 0 },
        { name: '河东区', value: 0 },
        { name: '河西区', value: 0 },
        { name: '南开区', value: 4 },
        { name: '河北区', value: 0 },
        { name: '红桥区', value: 0 },
        { name: '塘沽区', value: 0 },
        { name: '汉沽区', value: 0 },
        { name: '大港区', value: 0 },
        { name: '东丽区', value: 0 },
        { name: '西青区', value: 0 },
        { name: '津南区', value: 0 },
        { name: '北辰区', value: 2 },
        { name: '武清区', value: 1 },
        { name: '宝坻区', value: 0 },
        { name: '宁河区', value: 0 },
        { name: '静海区', value: 0 },
        { name: '滨海新区', value: 0 },
        { name: '蓟州区', value: 0 }
      ],
      hebeiDataList: [
        { name: '张家口市', value: 0 },
        { name: '承德市', value: 0 },
        { name: '廊坊市', value: 2 },
        { name: '保定市', value: 0 },
        { name: '唐山市', value: 0 },
        { name: '秦皇岛市', value: 0 },
        { name: '沧州市', value: 0 },
        { name: '石家庄市', value: 0 },
        { name: '衡水市', value: 0 },
        { name: '邯郸市', value: 0 },
        { name: '邢台市', value: 0 }
      ],
      chartOption: {
        title: {
          text: '阴极测试桩分布图',
          textStyle: {
            fontSize: 20,
            fontStyle: 'italic',
            fontWeight: 'normal',
            color: '#ffff'
          },
          left: 'center'
        },
        tooltip: {
          formatter: function(params, ticket, callback) {
            if (!params.value) {
              params.value = '-'
            }
            return (
              params.seriesName + '<br />' + params.name + '：' + params.value
            )
          } // 数据格式化
        },
        visualMap: {
          min: -3,
          max: 7,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
          inRange: {
            color: ['#26c6ef', '#216cb2'] // 取值范围的颜色
          },
          show: true // 图注
        },
        geo: {
          map: '',
          roam: true, // 不开启缩放和平移
          zoom: 1.23, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgb(249, 249, 249)'
            }
          },
          scaleLimit: {
            min: 0.8,
            max: 2.5
          },
          itemStyle: {
            normal: {
              // borderColor: 'rgba(0, 0, 0, 0.2)'
              areaColor: '#24CFF4',
              borderColor: '#53D9FF',
              borderWidth: 1.3,
              shadowBlur: 15,
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 7,
              shadowOffsetY: 6
            },
            emphasis: {
              areaColor: 'rgb(139, 213, 251)', // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              // shadowBlur: 20,
              // borderWidth: 0,
              borderWidth: 1.6,
              shadowBlur: 15,
              shadowColor: 'rgba(36,142,218,0.5)'
            }
          }
        },
        series: [
          {
            name: '设备数量',
            type: 'map',
            geoIndex: 0,
            data: ''
          }
        ]
      }
    }
  },
  watch: {

  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    backMap() {
      if (this.map === 'china') {
        alert('已经是顶层了')
      }
      this.chart.clear
      this.map = 'china'
      window.addEventListener('resize', function() {
        this.Chart.resize()
      })
      this.chart.setOption(
        {
          geo: {
            map: this.map,
            center: ''
          },
          series: [
            { data: this.dataList },
            {
              name: '设备坐标',
              data: ''
            }
          ]
        }
      )
    },
    randomValue() {
      return Math.round(Math.random() * 1000)
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chinaChart'))
      window.onresize = this.chart.resize
      this.chart.on('click', (param) => {
        this.map = param.data.name
        if (param.data.name === '天津') {
          this.chart.setOption({
            geo: {
              map: '天津',
              center: ''
            },
            series: [
              { data: this.tianjinDataList },
              {
                name: '设备坐标',
                type: 'scatter', //  配置显示方式为用户自定义
                coordinateSystem: 'geo',
                data: [
                  { value: [117.035566, 39.167529] },
                  { value: [116.995027, 39.169415] },
                  { value: [116.939019, 39.172557] },
                  { value: [117.157564, 39.092731] },
                  { value: [117.158873, 39.092267] },
                  { value: [117.15865, 39.095512] },
                  { value: [117.158862, 39.093734] }
                ],
                symbol: 'image://https://i.loli.net/2021/09/03/Ytk76gzEKBfu1ec.jpg',
                symbolSize: 30
              }
            ]
          })
        }
        if (param.data.name === '河北') {
          this.map = '河北'
          this.chart.setOption({
            geo: {
              map: '河北',
              center: ''
            },
            series: [
              { data: this.hebeiDataList },
              {
                name: '设备坐标',
                type: 'scatter', //  配置显示方式为用户自定义
                coordinateSystem: 'geo',
                data: [
                  { value: [116.805482, 39.192232] },
                  { value: [116.782689, 39.198011] }
                ],
                symbol: 'image://https://i.loli.net/2021/09/03/Ytk76gzEKBfu1ec.jpg',
                symbolSize: 30
              }
            ]
          })
        }
      })
      this.chart.setOption(this.chartOption)
      this.chart.setOption({
        geo: { map: 'china' },
        series: [
          { data: this.dataList }
        ]
      })
    }
  }
}
</script>
<style scoped>
#box {
}
.btn {
color: rgb(179, 239, 255);
font-size: 16px;
cursor: pointer;
z-index: 100;
}
</style>
